<template>
  <section class="block-box">
    <el-form>
      <el-form-item label="列表名称" label-width="70px">
        <el-input type="text" v-model="model.title" placeholder="输入列表名称" @keyup.native="onTextChange"></el-input>
      </el-form-item>
    </el-form>
    <el-row class="book-table-title">列表书籍</el-row>
    <el-table :data="model.blockBookList" :show-header="false" class="book-table" style="width: 100%" v-if="model.blockBookList!=null && model.blockBookList.length>0">
      <el-table-column width="70" align="left">
        <template slot-scope="scope">
          <img :src="scope.row.book.cover" class="book-img" />
        </template>
      </el-table-column>
      <el-table-column align="left">
        <template slot-scope="scope">
          <p class="book-tit">{{scope.row.book.title}}</p>
          <p class="book-author">{{scope.row.book.author}}</p>
        </template>
      </el-table-column>
      <el-table-column width="120" align="center">
        <template slot-scope="scope">
          <span class="book-sort">排序:</span>
          <el-input-number size="mini" style="width:50px" v-model="scope.row.showOrder" :controls="false" :min="1" :max="99" @change="onSortChange"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column width="30" align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-delete" type="text" @click="onItemClose(scope.$index,scope.row)" title="删除"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <a class="book-add" @click="onItemAdd">+添加书籍</a>
    </el-row>
    <el-dialog title="添加书籍" :visible.sync="dialogVisible" width="700px">
      <select-book @save="emitSave" :templateId="templateId" v-if="dialogVisible"></select-book>
    </el-dialog>
  </section>
</template>

<script>
import SelectBook from "./SelectBook";

  export default {
    name:"Block",
    props:{
      block:{
        type:Object,
        default:null
      },
      templateId:{
        type:String,
        default:null
      }
    },
    components:{
      SelectBook
    },
    data(){
      return{
        model:{},
        template:{
          id:null,
          title:'',
          linkUrl:'',
          showOrder:1,
          blockBookList:[{
            id:null,
            showOrder:1,
            bookId:null,
            book: {
              cover: '/static/images/1.jpg',
              title: '王小虎',
              author: '上海市普陀区金沙江路 1518 弄'
            },
            deleted:'UN_DELETED',
          }],
          deleted:'UN_DELETED',
        },
        deleteBookList:[],
        dialogVisible:false,
        isLoading:false,
      }
    },
    methods:{
      onTextChange(val){
        this.autoUpdate()
      },
      onItemClose(index,row){
        if(this.model.blockBookList[index].id != null){
          let book = this.model.blockBookList[index];
          book.deleted = 'DELETED';
          this.deleteBookList.push(book);
        }
        this.model.blockBookList.splice(index, 1)
        this.autoUpdate()
      },
      onItemAdd(){
        this.dialogVisible = true;
      },
      emitSave(book){
        this.dialogVisible = false;
        if(book != null){
          let bookList = this.model.blockBookList;
          if(bookList.filter(m=>m.book.id === book.id).length>0) return;
          let maxSort = bookList.length>0?bookList[bookList.length-1].showOrder:0;
          this.model.blockBookList.push({
            showOrder:maxSort+1,
            bookId:book.id,
            book:book,
            deleted:'UN_DELETED'
          })
        }
        this.autoUpdate()
      },
      onSortChange(){
        this.$nextTick(()=>{
          this.model.blockBookList.sort((a,b)=>{ return a.showOrder - b.showOrder})
          this.autoUpdate()
        })
      },
      init(){
        let newBlock = this.baseUtil.modelCopy(this.template);
        this.model = newBlock;
        this.autoUpdate();
        this.loadBookCategory();
      },
      autoUpdate(){
        let model = this.baseUtil.modelCopy(this.model);
        model.blockBookList = model.blockBookList.concat(this.deleteBookList);
        this.$emit("update:block",model)
      }
    },
    mounted(){
      if(this.block != null && this.block.title) {
        this.model = this.block;
        return;
      }
      this.init();
    }
  }
</script>

<style scoped>
  .block-box{}
  .block-box .book-table-title{
    font-size:14px;
    font-weight: bolder;
    color:#606266;
    padding-bottom:10px;
  }
  .book-table .book-img{
    width:52px;
    height:76px;
    padding:1px;
    border:1px solid #f2f2f2;
  }
  .book-table .book-tit,.book-table .book-author,.book-table .book-price{
    margin:0;
    padding: 0;
    line-height: normal;
    font-size:14px;
  }
  .book-table .book-tit{
    color:#2C2B2A;
    font-weight:bolder;
    padding-bottom:7px;
  }
  .book-table .book-author{
    color:#8D8D8D;
    padding-bottom:15px;
  }
  .book-table .book-price{
    color:#EB5A64;
    padding-bottom:15px;
  }
  .block-box .book-add{
    display: inline-block;
    margin-top:15px;
    font-size:14px;
    color:#2BB89A;
  }
</style>
